.comment-panel {
  @apply flex flex-col py-3;

  .body {
    @apply flex flex-col flex-1 overflow-auto gap-2 pb-2 relative;
  }

  .footer {
    @apply flex flex-col h-auto gap-2;

  }
}

.mark-input {
  @apply flex flex-col p-3 gap-2;

  .input-wrapper {
    @apply flex-1;
  }

  .actions-wrapper {
    @apply flex flex-row gap-2 justify-end;
  }
}

.mark-model-name {
  @apply flex flex-row text-xs rounded-lg p-2 bg-[#F1F3F5] text-black text-opacity-45;
}

.mark-item {
  @apply flex flex-col p-3 mx-3 border-2 border-[#E7EAED] rounded-lg bg-white;

  .item-header {
    @apply flex justify-end p-1 justify-between items-center;

    .user-info {
      @apply flex items-center gap-2 text-xs text-gray-500;
    }

    .close-btn {
      @apply text-[#717780];
    }
  }

  .item-content {
    @apply flex flex-col gap-1;

    .text {
      @apply text-sm text-black p-2;
    }

    .time {
      @apply flex justify-end text-xs text-gray-400;
    }
  }

  &.selected {
    @apply border-2 border-[#464681] rounded-lg;
  }
}